<script setup lang="js">
import { provide, reactive, ref } from 'vue';
import {
  MoreOutlined,
  PlusOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import Todo from "./components/todo.vue"

const ipcHandle = () => window.electron.ipcRenderer.send('ping')

// todos数据
const todos = ref([
  {
    id: 1,
    title: "打王者",
    content: "不要连跪",
    isDo: false
  },
  {
    id: 2,
    title: "金铲铲",
    content: "不要连跪",
    isDo: false
  },
  {
    id: 3,
    title: "CSGO",
    content: "不要连跪",
    isDo: false
  },
  {
    id: 4,
    title: "马嘉祺",
    content: "不要连跪",
    isDo: false
  },
  {
    id: 5,
    title: "马嘉祺",
    content: "不要连跪",
    isDo: false
  }
])


// 开启更多功能
const isMoreActions = ref(false)
const getMoreActions = () => {
  isMoreActions.value = !isMoreActions.value

}


// add
const isAdd = ref(false)

// formData
const addFormData = reactive({
  id: 0,
  title: "",
  content: "",
  isDo: false
})
// add todo
const addTodo = () => {
  let date = Date.now();
  addFormData.id = Math.round(date / 666666);

  // let data = JSON.parse(JSON.stringify(addFormData))
  let data = Object.assign({},addFormData)
  todos.value.push(data)

  isAdd.value = false
  message.success("添加成功", 1)
  addFormData.title = ""
  addFormData.content = ''
}

// edit todo
const editTodo = (title, content, todoId) => {
  addFormData.title = title
  addFormData.content = content
  todos.value.forEach((todo) => {
    if (todo.id == todoId) {
      todo.title = title
      todo.content = content
      addFormData.title = ''
      addFormData.content = ''
      message.success("编辑成功", 1)
      return true;
    }
  })
  return true;
}
provide('edit', editTodo)

// delete todo
const deleteTodo = (todoId) => {
  try {
    todos.value = todos.value.filter(todo => todo.id != todoId)
    message.success('已删除', 1);
  } catch (error) {
    message.error("删除失败", 1)
  }
}
provide('delete', deleteTodo)


// set top
const setTop = (todoId, title) => {
  let todoObj = {}
  todos.value.forEach((todo) => {
    if (todo.id == todoId) {
      todoObj = todo
    }
  })
  console.log(todoId);
  todos.value = todos.value.filter((todo) => todo.id != todoId)
  todos.value.unshift(todoObj)
  message.success(`已将 ${title} 置顶,`, 1)
}

provide('settop', setTop)
</script>

<template>
  <!-- add todo modal -->
  <a-modal v-model:open="isAdd" title="添加todo" @ok="addTodo" centered cancelText="算了" okText="搞定"  >
    <a-flex gap="small" vertical>
      <a-input v-model:value="addFormData.title" placeholder="标题" />
      <a-input v-model:value="addFormData.content" autofocus placeholder="描述" />
    </a-flex>
  </a-modal>

  <div class="appbar">
    <PlusOutlined class="icon" :style="{ fontSize: '16px', color: '#00b96b' }" @click="isAdd = true" />
    <MoreOutlined class="icon"
      :style="{ fontSize: '16px', color: '#00b96b', backgroundColor: isMoreActions ? 'rgba(128, 128, 128, 0.24)' : '' }"
      @click="getMoreActions" />
  </div>
  <div class="container">
    <Todo v-for="todo in todos" :todo="todo" :isMoreActions="isMoreActions"></Todo>
  </div>
</template>

<style lang="scss">
/* 定义滚动条宽度 */
::-webkit-scrollbar {
  width: 5px;
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 定义滚动条的滑轮（滑动块） */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2.5px;
}

/* 将滚动条的滑轮（滑动块）的颜色在鼠标滑动上变为深色 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.appbar {
  width: 100%;
  height: 25px;
  padding: 0 16px;
  display: flex;
  // gap: 5px;
  // align-items: center;
  // justify-content: space-around;
  // background-color: greenyellow;

  .icon {
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 5px;

    &:hover {
      background-color: rgba(128, 128, 128, 0.24);
    }

    &:active {
      scale: 1.1;
    }
  }
}

.container {
  width: 100vw;
  height: calc(100vh - 25px);
  overflow: auto;
  // background-color: blue;
}
</style>
